<template>
  <div class="saveUpdate">
    <el-dialog :title="status === 0?'回复':'查看'" :visible.sync="showDialog"
               @close="$emit('update:showUpdate', 0)"
               :showUpdate="showUpdate" width="900px" :close-on-click-modal="false">
      <div>
        <el-row>
          <el-col :span="8">用户ID：{{DetailInfo.player_id}}</el-col>
          <el-col :span="8">用户等级：{{DetailInfo.level}}</el-col>
          <el-col :span="8">注册渠道：{{DetailInfo.chn}}</el-col>
        </el-row>
        <el-row>
          <el-col :span="8">游戏版本：{{DetailInfo.game_version}}</el-col>
          <el-col :span="8">机型：{{DetailInfo.ua}}</el-col>
          <el-col :span="8">系统：{{DetailInfo.platform}}</el-col>
        </el-row>
        <el-row>
          <el-col :span="8">问题类型：{{DetailInfo.type.desc ? DetailInfo.type.desc :''}}</el-col>
          <div v-if="DetailInfo.type.desc === '提现问题' || DetailInfo.type.desc === '游戏问题' || DetailInfo.type.desc === '账号问题'  || DetailInfo.type.desc === '其他问题'">
            <el-col :span="8" v-if="DetailInfo.type.desc === '游戏问题'">游戏分类：{{$store.state.app.gameType[DetailInfo.game]}}</el-col>
            <el-col :span="8">问题分类：{{$store.state.app.questionType[DetailInfo.question_type]}}</el-col>
          </div>
          <div v-if="DetailInfo.type.desc === '商务合作'">
            <el-col :span="8">联系方式：{{contactType[cooperation.contact_type] }}</el-col>
            <el-col :span="8">联系号码：{{cooperation.contact_account}}</el-col>
          </div>
          <div v-if="DetailInfo.type.desc === '提现问题' && $store.state.app.questionType[DetailInfo.question_type] === '提现未到账'">
            <el-col :span="8">提现单号：{{DetailInfo.withdraw_id}}</el-col>
            <el-col :span="8">提现时间：{{DetailInfo.withdraw_at}}</el-col>
            <el-col :span="8">提现金额：{{DetailInfo.amount ? DetailInfo.amount:0}}</el-col>
            <el-col :span="24">
              <el-col :span="2">补充说明：</el-col>
              <el-col :span="22" v-if="DetailInfo.desc" v-html="DetailInfo.desc"></el-col>
            </el-col>
          </div>
          <div v-else-if="DetailInfo.type.desc !== '充值问题'&&DetailInfo.type.desc !== '商务合作'">
            <el-row>
              <el-col :span="24">
                <el-col :span="3">问题详细描述：</el-col>
                <el-col :span="21" v-if="DetailInfo.desc" v-html="DetailInfo.desc"></el-col>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24" v-if="!($store.state.app.questionType[DetailInfo.question_type] === '建议')">
                问题出现的具体时间：{{DetailInfo.appear_at }}
              </el-col>
            </el-row>
          </div>
          <div v-if="DetailInfo.type.desc === '充值问题'">
            <el-col :span="8">充值单号：{{DetailInfo.pay_id}}</el-col>
            <el-col :span="8">付款时间：{{DetailInfo.pay_at}}</el-col>
          </div>
        </el-row>
        <div v-if="DetailInfo.type.desc === '充值问题'">
          <el-row>
            <el-col :span="8">充值金额：{{DetailInfo.amount ? DetailInfo.amount:0}}</el-col>
            <el-col :span="8">支付类型：{{$store.state.app.pay_type[DetailInfo.pay_type]}}</el-col>
            <el-col :span="8">付款姓名：{{DetailInfo.pay_name}}</el-col>
          </el-row>
        </div>
        <div v-if="DetailInfo.type.desc === '商务合作'">
          <el-row>
            <el-col :span="24">您拥有的资源：{{cooperation.source_desc}}</el-col>
            <el-col :span="8">之前是否有棋牌推广经验：{{cooperation.is_veteran ===1 ? '是':'否'}}</el-col>
            <el-col :span="8">当前是否拥有下级团队：{{cooperation.with_lower ===1 ? '是':'否'}}</el-col>
            <el-col :span="8">下级团队人数：{{proSubordinateTeamNum_[cooperation.lower_count]}}</el-col>
          </el-row>
          <el-row>
            <el-col :span="24">预计每天可带来多少新用户：{{propNewUser[cooperation.daily_new]}}</el-col>
          </el-row>
        </div>

        <el-row v-if="DetailInfo.type.desc !== '商务合作'&&DetailInfo.images">
          <el-col :span="24" >凭证： <a v-for="(item, index) in DetailInfo.images" :href="item" :key="index" target="_blank">
            <img :src="item" style="width: 30px">
          </a></el-col>
        </el-row>
        <el-row v-if="DetailInfo.type.desc !== '商务合作'&&dataAllInDom&& !DetailInfo.images">
          <el-col :span="24" >凭证： 无</el-col>
        </el-row>
        <el-divider></el-divider>
        <el-row>
          <el-col :span="4">回复：</el-col>
          <el-col :span="20" v-if="DetailInfo.response" v-html="DetailInfo.response"></el-col>
        </el-row>
        <!-- <el-row>
          <el-col :span="4">问题是否解决：</el-col>
          <el-col :span="20">{{DetailInfo.is_solved === 1 ? '已解决':'未解决'}}</el-col>
        </el-row> -->
        <el-row v-if="DetailInfo.status === 1">
          <el-col :span="4">重设问题类型：</el-col>
          <el-col :span="20">{{DetailInfo.reset_type.desc}}</el-col>
        </el-row>
        <el-row v-if="DetailInfo.status === 1">
          <el-col :span="4">二级分类：</el-col>
          <el-col :span="20">{{DetailInfo.reset_question_type_desc}}</el-col>
        </el-row>
        <el-row v-if="DetailInfo.status === 1">
          <el-col :span="4">三级分类：</el-col>
          <el-col :span="20">{{DetailInfo.reset_game_desc}}</el-col>
        </el-row>
        <el-row>
          <el-col :span="4">备注：</el-col>
          <el-col :span="20" v-if="DetailInfo.remark&&DetailInfo.status === 1" v-html="DetailInfo.remark"></el-col>
        </el-row>
        <el-divider></el-divider>
        <div v-if="DetailInfo.status===1&&DetailInfo.quality===null">
          <el-row>
            <el-col :span="4">质检结果：</el-col>
            <el-col :span="6">
              <el-select v-model="quality" clearable placeholder="请选择">
                <el-option v-for="(val,name) in {'合格':'1','不合格':'2'}" :key="name" :label="name" :value="val"></el-option>
              </el-select>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="4">质检备注：</el-col>
            <el-col :span="20">
              <el-input type="textarea" :rows="3" placeholder="请输入内容" v-model="quality_note"></el-input>
            </el-col>
          </el-row>
        </div>
        <div v-else>
          <el-row>
            <el-col :span="24">质检结果：{{DetailInfo.quality===2?'不合格':DetailInfo.quality===1?'合格':''}}</el-col>
          </el-row>
          <el-row>
            <el-col :span="24">质检备注：{{DetailInfo.quality_note}}</el-col>
          </el-row>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button v-if="DetailInfo.status===1&&DetailInfo.quality===null" @click="$emit('update:showUpdate', 0)" size="small">取 消</el-button>
        <el-button v-if="DetailInfo.status===1&&DetailInfo.quality===null" type="primary" :loading="loading" @click="updateDetail" size="small">确 定
        </el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
  // import DialogWrapper from '@/components/DialogWrapper'
  import { getWorkOrderById, updateWordQuality } from '@/api'
  import { queryFilter } from '@/utils/patch'

  export default {
    // components: {DialogWrapper},
    data() {
      return {
        showDialog: this.showUpdate,
        loading: false,
        dataAllInDom: false,
        DetailInfo: {
          type:{
            desc:null
          },
          reset_type:{
            desc:null
          }
        },
        cooperation: {},
        contactType: this.$store.state.app.contactType,
        proSubordinateTeamNum_:this.$store.state.app.proSubordinateTeamNum_,
        propNewUser: this.$store.state.app.propNewUser_,
        quality: '',
        quality_note: ''
      }
    },
    props: {
      showUpdate: {
        type: Boolean,
        default: false
      },
      id: {
        type: Number
      },
      problemsTypeList: {
        type: Array
      },
      status: {
        type: Number
      }
    },
    created() {
      if (this.id) {
        this.getDetail()
      }
    },
    mounted() {

    },
    methods: {
      saveDetail() {

      },
      updateDetail() {
        let requstOjb = {
          quality: this.quality,
          quality_note: this.quality_note
        }
        let queryObj = queryFilter(requstOjb)
        updateWordQuality(this.id, queryObj).then(res => {
          if (res.status === 0){
            this.$message({type: 'success', message: '操作成功'})
            this.$emit('update:showUpdate', false)
          }
        })
      },
      getDetail() {
        getWorkOrderById(this.id).then(res => {
          // console.log(res, '2333', this.id)
          if (res.status === 0) {
            this.DetailInfo = res.data
            this.cooperation = JSON.parse(this.DetailInfo.cooperation) || {}
            this.DetailInfo.ua = this.DetailInfo.ua.split('like')[0].split('Build')[0]
            this.dataAllInDom = true
            // 为什么可以写得这么好看，在线等
            let desc=this.DetailInfo.desc&&this.DetailInfo.desc.replace(/\n/g,"<br/>").replace(/\s/g,"&nbsp;");
            Object.assign(this.DetailInfo,{desc})
            let response=this.DetailInfo.response&&this.DetailInfo.response.replace(/\n/g,"<br/>").replace(/\s/g,"&nbsp;");
            Object.assign(this.DetailInfo,{response})
            let remark=this.DetailInfo.remark&&this.DetailInfo.remark.replace(/\n/g,"<br/>").replace(/\s/g,"&nbsp;");
            Object.assign(this.DetailInfo,{remark})
          }
        })
      },
    }
    ,
    watch: {
      showUpdate() {
        this.showDialog = this.showUpdate
      }
    }
  }
</script>

<style scoped>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }

  .el-col {
    margin: 10px 0 10px 0;
  }
</style>
